<template>
  <div class="conMain">
    <div style="margin:20px 0px;">
      温馨提示：每个充值金额对应不同的佣金，但推广码和推广链接是一样的哦！
    </div>
    <div class="goods">
      <div class="glist" v-for="(item,index) in list">
        <div class="glist-top">
          <img class="glist-img" :src="item.image" fit="fill"></img>
        </div>
        <div class="glist-title">
          {{item.name}}
        </div>
        <div class="glist-des" >
          {{item.memo}}
        </div>
        <el-row class="glist-bottom">
          <el-col :span="12" style="color:red">佣金：{{item.agfee}}</el-col>
          <el-col :span="6" style="color:#e6a23c;" ><a v-clipboard:copy="copyurl"   @click="copy(item.url)">推广链接</a></el-col>
          <el-col :span="6" style="color:#67c23a;text-align: right;"><a @click="qrcode(item.id,item.url,item.name)">推广码</a></el-col>
        </el-row>
      </div>
    </div>
    <el-dialog title="推广码"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    left  width="30%">
        <div style="color:#686868;margin-bottom: 10px;">
          {{copyurl}}
        </div>
        <div style="text-align: center;">
          <el-image
              style="width: 200px; height: 200px"
              :src="qrcodeurl">
          </el-image>
          <div style="color:#686868">
            {{qrtitle}}
          </div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
  import { charge_goods,charge_qrcode } from  '@/api/charge'

  export default {
    data() {
      return {
        dialogVisible:false,
        copyurl:'',
        list:[],
        tturl:'',
        qrtitle:'',
        qrcodeurl:'',
      }
    },
    created() {
      charge_goods().then(res => {
        this.list=res.data.list
        this.tturl=res.data.tturl
      })
    },
    methods: {
      copy(url){
      　this.copyurl=url
        this.$notify({
          title:'推广链接已复制',
          message:url,
          type: 'success',
          duration: 2000
        })
      },
      qrcode(id,url,name=""){
        charge_qrcode({id:id}).then(res => {
          this.dialogVisible=true
          this.qrcodeurl=res.data.qrcode
           this.qrtitle=name
           this.copyurl=url
        })
      }
    },
  }

</script>

<style lang="scss">
  .conMain{
    margin-bottom: 20px;
  }
  .goods{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;

  }
  .glist{
    border:1px solid #cccccc;
    width:250px;
    margin-top: 20px;
    margin-right: 20px;
    .glist-top{
      height:200px;
      .glist-img{
        width:100%;
        height:100%;
      }
    }
    .glist-title{
      padding: 6px 4px;
      font-size: 16px;
      text-align: center;
    }
    .glist-des{
      padding:4px 4px 8px 4px;
      font-size: 15px;
      min-height: 40px;
      color:#6f7071;
    }
    .glist-bottom{
      padding: 4px 4px 10px;
      font-size: 15px;
    }
  }


</style>
